<template>
	<view class="order-detail-content">
		<!-- address -->
		<AddressItem :use-path="0" :address="address"></AddressItem>
		<!-- base-data -->
		<BaseData :number="order.number"  :order-time="order.orderTime"  ></BaseData>
		<!-- PayMode -->
		<PayMode></PayMode>
		<!-- list -->
		<view class="list-wrap">
			<OrderItem :usePath="1" :orderItem="order">
				<ListItem v-for="item in order.orderDetailList" :key="item.id" :itemData="item"></ListItem>
			</OrderItem>
		</view>
	</view>
</template>

<script>
	import ListItem from "./components/list-item.vue"
	import OrderItem from "./components/order-item.vue"
	import AddressItem from "../user/components/address_item.vue"
	import BaseData from "./components/order_base_data.vue"
	import PayMode from "./components/pay-mode.vue"

	// import { getAddressDefaultApi } from "@/http/address.js"
	import {
		getOrderDetailApi
	} from "@/http/order.js"

	export default {
		data() {
			return {
				address: {
					id: 11,
					name: "***先生",
					tel: "*********",
					area: "****  ****  ****",
					detail: "****************",
					isDefault: 0
				},
				query: {
					orderId: null
				},
				order: {}
			}
		},
		components: {
			ListItem,
			OrderItem,
			AddressItem,
			BaseData,
			PayMode
		},
		onLoad(e) {
			this.query.orderId = e.id;
			this.getOrderDetail();
		},
		methods: {
			async getOrderDetail() {
				const res = await getOrderDetailApi(this.query);
				if(!res) return;
				this.order = res;
			    res.orderAddress.area =  `${res.orderAddress.provinceName} ${res.orderAddress.cityName} ${res.orderAddress.districtName}`;
				this.address = res.orderAddress;
			}
		}
	}
</script>

<style lang="less" scoped>
	.order-detail-content {
		background-color: #fbf9ec;
		min-height: 100vh;
		padding-top: 30rpx;

		.tab-wrap {
			position: fixed;
			width: 100%;
			z-index: 1000;
			// padding-bottom: 2;
		}

		.list-wrap {
			padding: 0 20rpx;
			padding-top: 15rpx;


		}
	}
</style>